<!-- @format -->

<!--文本自动省略号-->
<template>
    <a-tooltip v-if="flag">
        <template slot="title">
            {{ fullString }}
        </template>
        {{ newString }}
    </a-tooltip>
    <span v-else>{{ newString }}</span>
</template>
<script>
import { cutStrByFullLength, getStrFullLength } from './_util/util'

export default {
    name: 'ellipsis',
    data() {
        return {
            newString: '',
            flag: false
        }
    },
    props: {
        fullString: {
            type: String
        },
        tooltip: {
            type: Boolean
        },
        length: {
            type: Number,
            required: true
        }
    },
    watch: {
        fullString() {
            this.init()
        }
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            //this.fullString = this.$slots.default.map(vNode => vNode.text).join('')
            if (this.fullString !== null && this.fullString !== '') {
                const fullLength = getStrFullLength(this.fullString)
                if (this.tooltip && fullLength > this.length) {
                    this.flag = true
                    this.newString = cutStrByFullLength(this.fullString, this.length) + '...'
                } else {
                    this.flag = false
                    this.newString = this.fullString
                }
            } else {
                this.newString = '-'
            }
        }
    }
}
</script>
